<template>
	<div>
		<Head></Head>
		<div class="mains">
			<div class="mains-login">
				<h3>欢迎您的加入</h3>
				<div class="mains-login-boder"  v-if="loginVisible">
					<input type="text" v-model="id"  placeholder="账号" name="" id="">
				</div>
				<div class="mains-login-boder" v-if="!loginVisible">
					<input type="text" v-model="phone"  placeholder="手机号" name="" id="">
				</div>
				<div class="mains-login-yzm mains-login-boder">
					<input type="text" v-model="password" placeholder="密码" name="" id="">
				</div>
			</div>
			<div class="mains-login">
				<mt-button @click="Submit()">{{!loginVisible?"注册":"登陆"}}</mt-button>
				<span class="xy">{{!loginVisible?"注册":"登陆"}}即为同意<a href="">《用户使用协议》</a>及<a href="">《隐私权条款》</a></span>
				<span class="xy" @click="(loginVisible=!loginVisible)">点我{{loginVisible?"注册":"登陆"}}</span>
			</div>
		</div>
		<mt-popup v-model="popupVisible" :modal="false" class="tishi" position="top">
			<input v-model="tishiyu" />
		</mt-popup>
	</div>
</template>

<script>
	import Head from "../components/Head.vue"
	import { Login,Regist } from "../api/jsoup";
import { timeout } from "q";
	export default {
		name: "Login",
		components: {
			Head
		},
		data() {
			return {
				loginVisible:true,
				popupVisible:false,
				tishiyu:"",
				id:"",
				phone:"",
				username:"",
				password:"",
				LoggingStatus: false
			}
		},
		methods: {
			Submit:function(){
				if(this.loginVisible){
					Login({id:this.id,password:this.password},this.__Login);
				} else {
					Regist({phone:this.phone,password:this.password},this.__Regist);
				}
			},
			__Regist:function(data){
				let res = eval("(" + data + ")");
				if(res.states == "0"){
					$.cookie("user",JSON.stringify(res.user));
					this.$router.push({name:'UserCenter',params:res})
				} else {
					this.popupVisible = true;
					this.tishiyu = res.msg;
					setTimeout(() => {
						this.popupVisible = false;
					}, 3000);
				}
			},
			__Login:function(data){
				let res = eval("(" + data + ")");
				if(res.states == "0"){
					$.cookie("user",JSON.stringify(res.user));
					this.$router.push({name:'UserCenter',params:res})
				} else {
					this.popupVisible = true;
					this.tishiyu = res.msg;
					setTimeout(() => {
						this.popupVisible = false;
					}, 3000);
				}
			}
		},
	}
</script>

<style>
	.mains-login {
		width: 100%;
		display: flex;
		flex-direction: column;
		color: #252825;
		margin-top: 1.25rem;
	}

	.mains-login h3 {
		text-align: center;
		line-height: 3.125rem;
		color: #ff5722;
	}

	.mains-login-boder {
		border-bottom: 1px solid #dde4ea;
		margin-bottom: 1rem;
	}

	.mains-login input {
		width: 100%;
		padding: 0.75rem 0;
		font-size: 1rem;
		color: #495056;
	}

	.mains-login input::placeholder {
		color: #495056;
	}

	.mains-login-yzm {
		display: flex;
		justify-content: space-between;
	}

	.mains-login-yzm span {
		color: #02c386;
		width: 100%;
		line-height: 43px;
		margin-left: 168px;
	}

	.mains-login button {
		width: 100%;
		background-color: #02c386;
		color: #fff;
	}


	.mains-login .xy {
		font-size: 0.75rem;
		color: #8f96a0;
		line-height: 2.60rem;
		text-align: center;
	}

	.mains-login .xy a {
		color: #22ac38;
	}
</style>
